HTML 标记与文档结构

HTML 标记基础

文本用闭合标签

闭合标签的基本格式：<标签名>文本内容</标签名>

标题、段落等文本元素都要求闭合标签，也就是要有一个开标签和一个闭标签。

<h1>h1</h1>
<p>paragraph</p>

引用内容用自闭合标签

非文本内容通过自闭合标签来显示的。

自闭合标签的基本格式：<标签名属性_1="属性值" 属性_2="属性值" />

闭合标签与自闭合标签的区别

闭合标签包含的是会显示的实际内容
自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML 页面加载的时候，额外向服务器发送请求，以取得自闭合标签引用的内容。

XHTML 标准严格规定所有标签都必须关闭，在HTML5 网页里，某些闭标签是可以省略不写的。

属性

属性负责为浏览器提供有关标签的额外信息。

每个HTML 标签都可以添加属性。

标题与段落

<h1>不仅是最大最突出的标题（除非你用CSS 缩小它的字号），搜索引擎也会将其视为仅次于<title>标签的另一个搜索关键词的来源。

段落用于标记主要的文本内容，是所有文本元素中出场率最高的一个。简言之，只要有不适合放在其他文本标签中的文本，都可以把它放一个段落里面。

复合元素

HTML 不仅规定了标题、图片和段落等基本的内容标记，还规定了用于创建列表、表格和表单等复杂用户界面组件的标记，这些就是复合元素，即它们是由多个标签共同构成的。

嵌套标签

要在一个标签里嵌套另一个标签（也就是前者的开标签写在后者的开标签之前），必须要先关闭后一个标签再关闭前面那个标签。

HTML 文档剖析

有几个HTML 元素是所有HTML 文档（也就是网页）中都必须包含的。这些元素为内容提供了框架，有了这个框架才能正确显示内容。可以把这些必要的元素想象成一个模板页面里必须得有的元素。

HTML 模板

按照 HTML5 语法编写的最简单的 HTML 页面的模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>An HTML Template</title>
</head>
<body>
<!-- 这里是网页内容 -->
</body>
</html>

模板的第一行代码是一种简化的 DOCTYPE，这一行就是为了声明：“以下是一个HTML 文档。”

注意，这个标签不用关闭。

然后是 <html> 标签，也就是根级标签。页面中所有的其他标签都嵌套在这个标签内部，而且它的闭标签也是整个页面中的最后一个闭标签。

<html>标签只有两个直接的子标签：<head> 和 <body>。

帮助浏览器理解页面的信息都包含在 <head> 标签中。

在这个最简单的例子里，<head> 标签里只包含 <meta> 和 <title> 两个标签。

其中，<meta> 标签有一个 charset 属性，它是在告诉浏览器这个页面使用的是UTF-8 编码。

而 <title> 标签中的文本会在页面显示时，作为整个页面的标题出现在浏览器窗口顶部的标题栏中。上面模板中页面的标题是“An HTML Template”。

关于 <title> 标签搜索引擎会给 <title> 标签中的文字内容赋予很高的权重。而且这些文字也会作为网页标题出现在搜索结果列表中。为此，一定要让这些文字简洁明确，而且包含目标读者在搜索你的网页内容时会使用的关键词。

而 <body> 标签则包含着标记所有内容的HTML 元素。

块级元素和行内元素

“文档流”，也就是HTML 元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。

浏览器的样式表之所以提供这种流动式效果，就是为了让那些简单但却正确标记了HTML 的内容，能够以朴素但却可用的方式显示出来。

CSS 把默认的显示效果，转换成既有吸引力又直观的页面设计。

块级元素（比如标题和段落）会相互堆叠在一起沿页面向下排列，每个元素分别占一行。

行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。

文档对象模型

DOM 是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在CSS 中引用DOM 中特定的位置，就可以选中相应的HTML 元素，并修改其样式属性。

CSS 操作DOM 的过程是先选择一个或一组元素，然后再修改这些元素的属性。通过CSS 修改了元素后，比如修改了宽度或者在标记里插入一个伪元素，这些变化会立即在DOM 中发生，并体现在页面上。简言之，就是通过 HTML 标记来构建DOM，然后在页面初次加载和用户与页面交互时，使用 CSS 来修改DOM。